<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">合同管理</span>
    <el-button @click="addContract" type="primary" style="float:right;margin-top:13px;">新增合同</el-button>
  </div>
  <!-- 新增合同弹窗 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible"  :close-on-click-modal="false" style="width:1000px;padding:40px;">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="甲方">
            <el-input placeholder="请输入内容" v-model="saveContractForm.partA"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="乙方">
            <el-input placeholder="请输入内容" v-model="saveContractForm.partB"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="合同名称">
            <el-input placeholder="请输入内容" v-model="saveContractForm.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合同类型">
            <el-input placeholder="请输入内容" v-model="saveContractForm.type"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="合同内容">
            <el-input placeholder="请输入内容" v-model="saveContractForm.content"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input placeholder="请输入内容" v-model="saveContractForm.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="创建人">
            <el-input placeholder="请输入内容" v-model="saveContractForm.createUser"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最后修改人">
            <el-input placeholder="请输入内容" v-model="saveContractForm.lastUpdateUser"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
      <el-col :span="12">
        <el-form-item label="生效时间"  v-if="disableDate">
          <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"

                          v-model="saveContractForm.effectTime"
                          @change="validateDate"/>
        </el-form-item>
      </el-col>
        <el-col :span="12" >
          <el-form-item label="结束时间" v-if="disableDate">
            <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"

                            v-model="saveContractForm.endTime"
                            @change="validateDate"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="合同状态">
            <el-select v-model="saveContractForm.status" placeholder="请选择">
              <el-option v-for="item in conStatusArr" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="修改次数">
            <el-input placeholder="请输入内容" v-model="saveContractForm.updateTimes"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveContract">确定</el-button>
    </template>
  </el-dialog>
  <el-card style="margin:5px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="甲方">
        <el-input placeholder="请输入内容" style="width:220px;"
                  v-model="searchContractForm.partA" @keydown.enter="loadContract"></el-input>
      </el-form-item>
      <el-form-item label="乙方" style="width:290px;">
        <el-input placeholder="请输入内容" style="width:220px;"
                  v-model="searchContractForm.partB" @keydown.enter="loadContract"></el-input>
      </el-form-item>
      <el-form-item label="合同名称" style="width:290px;">
        <el-input placeholder="请输入内容" style="width:220px;"
                  v-model="searchContractForm.name" @keydown.enter="loadContract"></el-input>
      </el-form-item>
      <el-form-item label="合同状态" style="width:290px;">
        <el-select v-model="searchContractForm.status" placeholder="请选择">
          <el-option v-for="item in conStatusArr" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadContract">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin:5px;">
    <el-table :data="contractArr">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="partA" label="甲方" align="center"/>
      <el-table-column prop="partB" label="乙方" align="center"/>
      <el-table-column prop="name" label="合同名称" align="center"/>
      <el-table-column prop="type" label="合同类型" align="center"/>
      <el-table-column prop="content" label="合同内容" align="center"/>
      <el-table-column prop="remark" label="备注" align="center"/>
      <el-table-column prop="createUser" label="创建人" align="center"/>
      <el-table-column prop="createTime" label="创建时间" align="center"/>
      <el-table-column prop="effectTime" label="生效时间" align="center"/>
      <el-table-column prop="lastUpdateUser" label="最后修改人" align="center"/>
      <el-table-column prop="updateTime" label="更新时间" align="center"/>
      <el-table-column prop="endTime" label="结束时间" align="center"/>
      <el-table-column prop="status" label="合同状态" align="center" :formatter="conStatusFormat"/>
      <el-table-column prop="updateTimes" label="修改次数" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small"@click="editContract(scope.row.id)">编辑</el-button>
          <el-button link type="primary" size="small" @click="delContract(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";


const dialogVisible = ref(false);
//定义变量控制dialog的标题
const dialogTitle = ref('新增合同');
const searchContractForm =ref({});
const contractArr = ref([]);
const disableDate =ref(false);
const conStatusArr=ref([]);
const addContract=()=>{
  dialogVisible.value=true;
  dialogTitle.value='新增合同';
  disableDate.value=false;
  saveContractForm.value={};
}
const resetSearch = ()=>{
  searchContractForm.value={};
  loadContract();
}
onMounted(()=>{
  loadContract();
  loadDictOptions(conStatusArr,'ContractStatus');
})
const loadContract = ()=>{
  axios.post(BASE_URL+'/v1/contract/select',searchContractForm.value).then((response)=>{
    if(response.data.code==2000){
      contractArr.value=response.data.data
    }else {
      ElMessage.error(response.data.msg)
    }

})
}
const saveContractForm=ref({});
const handleClose=()=>{
  dialogVisible.value = false;
}
const saveContract=()=>{
  axios.post(BASE_URL+'/v1/contract/save',saveContractForm.value).then((response)=>{
    if(response.data.code==2000){
      ElMessage.success(response.data.msg);
      saveContractForm.value={};
      dialogVisible.value=false;
      loadContract();
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
const editContract=(id)=>{
  dialogVisible.value=true;
  dialogTitle.value='编辑合同';
  disableDate.value=true;
  axios.post(BASE_URL+'/v1/contract/select',{id:id}).then((response)=>{
    if(response.data.code==2000){
      saveContractForm.value=response.data.data[0];
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
const delContract=(id)=>{
  if (confirm('您确认要删除该记录吗?')){
    axios.post(BASE_URL+'/v1/contract/delete',{id:id}).then((response)=>{
      if(response.data.code==2000){
        ElMessage.success(response.data.msg);
        loadContract();
      }else{
        ElMessage.error(response.data.msg);
      }
    })
  }
}
const conStatusFormat=(row,column,cellValue,index)=>{
  if (!conStatusArr){
    return cellValue;
  }
  for (let item of conStatusArr.value){
    if (item.value == cellValue){
      cellValue = item.label
    }
  }
  return cellValue;
}
</script>